import { defineComponent } from "vue";
import style from "./index.module.less";
import { bannerUploaderProps } from "./types";
import icon from "./asset/icon.png";
import { useUploader } from "@/hooks/uploader";
export default defineComponent({
  name: "",
  props: bannerUploaderProps,
  emits: ["update:modelValue"],
  setup(_, { emit }) {
    const { upload } = useUploader({});
    return () => {
      return (
        <div>
          <div
            class="w-full h-[178px] flex items-center justify-center relative flex-col"
            style={{
              backgroundImage: `url(${_.modelValue})`,
              backgroundSize: "100% 100%",
            }}
            onClick={() => {
              upload((url) => {
                emit("update:modelValue", url);
              });
            }}
          >
            <img src={icon} class="w-[61px] h-[61px]" />
            <div class="mt-[10px] text-[12px] text-white ">{_.uploadText}</div>
          </div>
        </div>
      );
    };
  },
});
